<template>
  <div>
    <div class="container">
      <!-- 企业签名 -->
      <!-- <div class="title" style="margin-top: 40px;">
        <div class="title1">企业签名</div>
        <div class="title2">(选择最适合您的服务套餐)</div>
      </div>
      <el-row>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24"
          ><div class="grid-content bg-purple-dark table_one">
            <table class="table table-bordered table_content" :data="tableData">
              <thead>
                <tr>
                  <th style="width: 33%">套餐</th>
                  <th style="width: 33%">基础版</th>
                  <th style="width: 33%">
                    稳定版<img
                      src="../../../static/price/biaoqina_TuiJianShiYon.png"
                      style="
                        width: 56px;
                        position: absolute;
                        top: 55px;
                        left: 950px;
                      "
                      class="hidden-xs-only"
                      alt=""
                    />
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in firmList" :key="index">
                  <td class="server_text">
                    {{ item.title }}

                    <img v-if="item.month == '12个月'" :src="item.img" alt="" />
                  </td>
                  <td class="server_text">{{ item.price }}</td>
                  <td class="server_text">{{ item.high_price }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </el-col>
      </el-row> -->
      <!-- 超级签名 -->
      <div class="title" style="margin-top: 50px;">
        <div class="title1">超级签名</div>
        <div class="title2">(选择最适合您的服务套餐)</div>
      </div>
      <el-row>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <div class="grid-content bg-purple-dark table_one">
            <table class="table table-bordered table_content cjqm" :data="surpeObject">
              <thead>
                <tr>
                  <th style="width: 33%">套餐</th>
                  <th style="width: 33%">私有池</th>
                  <th style="width: 33%">
                    公有池<img src="../../../static/price/biaoqina_TuiJianShiYon.png" style="
                        width: 56px;
                         position: absolute;
                        top: 55px;
                        left: 950px;
                      " class="hidden-xs-only table_img" alt="" />
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in supersList" :key="index">
                  <td class="server_text">{{ item.title }}</td>
                  <td class="server_text">{{ item.price }}</td>
                  <td class="server_text">{{ item.high_price }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </el-col>
      </el-row>
      <!-- 服务介绍 -->
      <div class="title">
        <div class="title1">服务介绍</div>
        <div class="title2">(APP无需越狱或上架商店，即可直接安装到设备上)</div>
      </div>
      <el-row>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <div class="grid-content bg-purple-dark table_one">
            <table class="table table-bordered table_content" :data="serveObject">
              <thead>
                <tr>
                  <th style="width: 25%" class="server_th">服务</th>
                  <th style="width: 25%">基础版</th>
                  <th style="width: 25%">稳定版</th>
                  <th style="width: 25%">超级签名</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in serveObject" :key="index">
                  <td class="server_td">{{ item.title }}</td>
                  <td v-html="item.iconOne" class="server_icon"></td>
                  <td v-html="item.iconTwo" class="server_icon"></td>
                  <td v-html="item.iconThree" class="server_icon"></td>
                </tr>
              </tbody>
            </table>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="container">
      <!-- 常见问题 -->
      <div class="title">
        <div class="title1">常见问题</div>
      </div>
      <div class="threa_content">
        <el-row :gutter="20" class="row-bg" justify="space-around">
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" v-for="(item, index) in questionList" :key="index">
            <div class="threa_item">
              <div class="threa_item_one">
                <span class="wenhao">?</span>
                <div class="threa_item_title_one">{{ item.question }}</div>
              </div>
              <div class="threa_item_one">
                <img class="threa_item_image" src="../../../static/tf_answer.png" />
                <div class="threa_item_title_two">
                  {{ item.answer }}
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
      //这里存放数据
      return {
        tableData: [{
            month: "1个月",
            price_one: "1800元",
            price_two: "300元",
          },
          {
            month: "3个月",
            price_one: "1800元",
            price_two: "300元",
          },
          {
            month: "6个月",
            price_one: "1800元",
            price_two: "300元",
          },
          {
            month: "12个月",
            price_one: "1800元",
            price_two: "300元",
            img: "../../../static/price/biaoqian_Nianfu.png",
          },
          {
            month: "1个月",
            price_one: "1800元",
            price_two: "300元",
          },
          {
            month: "1个月",
            price_one: "1800元",
            price_two: "300元",
          },
        ],
        surpeObject: [{
            facility: "1个设备",
            private: "600元",
            public: "30元",
          },
          {
            facility: "1个设备",
            private: "600元",
            public: "30元",
          },
          {
            facility: "1个设备",
            private: "600元",
            public: "30元",
          },
          {
            facility: "1个设备",
            private: "600元",
            public: "30元",
          },
          {
            facility: "1个设备",
            private: "600元",
            public: "30元",
          },
          {
            facility: "1个设备",
            private: "600元",
            public: "30元",
          },
        ],
        serveObject: [{
            title: "官方手动签名",
            iconOne: "<i class=el-icon-success></i>",
            iconTwo: "<i class=el-icon-success></i>",
            iconThree: "<i class=el-icon-success></i>",
          },
          {
            title: "IPA包检测(系统、版本)",
            iconOne: "<i class=el-icon-success></i>",
            iconTwo: "<i class=el-icon-success></i>",
            iconThree: "<i class=el-icon-success></i>",
          },
          {
            title: "常用机型真机测试",
            iconOne: "<i class=el-icon-success></i>",
            iconTwo: "<i class=el-icon-success></i>",
            iconThree: "<i class=el-icon-success></i>",
          },
          {
            title: "证书分类签名",
            iconOne: "<i class=el-icon-success></i>",
            iconTwo: "<i class=el-icon-success></i>",
            iconThree: "<i class=el-icon-success></i>",
          },
          {
            title: "提供备用证书签名",
            iconOne: "<i class=el-icon-error></i>",
            iconTwo: "<i class=el-icon-success></i>",
            iconThree: "<i class=el-icon-success></i>",
          },
          {
            title: "应用扩展(App Extension)",
            iconOne: "<i class=el-icon-error></i>",
            iconTwo: "<i class=el-icon-success></i>",
            iconThree: "<i class=el-icon-success></i>",
          },
          {
            title: "网络代理(Packet Tunnel)",
            iconOne: "<i class=el-icon-error></i>",
            iconTwo: "<i class=el-icon-success></i>",
            iconThree: "<i class=el-icon-success></i>",
          },
          {
            title: "数据共享(App Groups)",
            iconOne: "<i class=el-icon-error></i>",
            iconTwo: "<i class=el-icon-error></i>",
            iconThree: "<i class=el-icon-success></i>",
          },
          {
            title: "计步器(HealthKit)",
            iconOne: "<i class=el-icon-error></i>",
            iconTwo: "<i class=el-icon-error></i>",
            iconThree: "<i class=el-icon-success></i>",
          },
          {
            title: "稳定性评星",
            iconOne: "<i class=el-icon-star-on></i><i class=el-icon-star-on></i><i class=el-icon-star-on></i><i class=el-icon-star-on></i><i class=el-icon-star-on></i>",
            iconTwo: "<i class=el-icon-star-on></i><i class=el-icon-star-on></i><i class=el-icon-star-on></i><i class=el-icon-star-on></i><i class=el-icon-star-on></i>",
          },
          {
            title: "各自特点",
            iconOne: "测试使用、中短期运营",
            iconTwo: "长期稳定运营",
            iconThree: "长期稳定运营",
          },
        ],
        questionList: [{
            question: "上传应用有什么限制？",
            answer: "无限制，只需提供正确的 IPA 包即可。",
          },
          {
            question: "提交正确的包之后多久可以使用？",
            answer: "正常时间为1-3天，若您需要加急，请联系我们的客服人员。",
          },
          {
            question: "链接安装有效期为多长时间?",
            answer: "有效期为3个月。"
          },
          {
            question: "链接下载次数限制为多少？",
            answer: "每个安装链接最多下载10000次，每超过10000次重新生成一个新的安装链接。",
          },
        ],
        messageObject: [{
            messageUrl: "../../../static/帮助中心.png",
            text: "上面没有找到需要解答的问题？点击进入帮助中心去寻找吧。",
          },
          {
            messageUrl: "../../../static/客服咨询.png",
            text: "当然，我们也给你配备了24小时的在线客服，欢迎咨询。",
          },
        ],
        yearUrl: "../../../static/price/biaoqian_Nianfu.png",
        typeOne: 1,
        typeTwo: 3,
        firmList: [],
        supersList: [],
      };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
      getListOne() {
        var params = new URLSearchParams();
        params.append("type", this.typeOne);
        this.$post(this.API.Price_payindex, params).then((res) => {
          let data = res.data;
          this.firmList = data;
        })
      },
      getListTwo() {
        var params = new URLSearchParams();
        params.append("type", this.typeTwo);
        this.$post(this.API.Price_payindex, params).then((res) => {
          let data = res.data;
          this.supersList = data;
        })
      },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
      this.getListOne();
      this.getListTwo();
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
  };

</script>
<style scoped>
  /* 标题 */
  .title {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 0px 0px 40px 0px;
    font-family: "PingFangSC-Regular, PingFang SC";
  }

  .title1 {
    color: #ffffff;
    font-size: 40px;
  }

  .title2 {
    font-size: 20px;
    color: #ccc;
  }

  /* 表格 */
  .table_one {
    background: transparent;
    box-shadow: 0px 6px 10px 4px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    margin-bottom: 60px;
    display: flex;
    align-items: center;
  }

  .table_content {
    margin: 50px;
    text-align: center;
    font-size: 20px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #fff;
    line-height: 20px;
    border-color: #9d9d9e;
  }

  table tr th {
    text-align: center;
    font-size: 20px;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #ff7f3a;
    line-height: 30px;
  }

  .table_content.cjqm th,
  .table_content.cjqm td {
    border-right: 0px;
    border-left: 0px;
  }

  .server_th,
  .server_td {
    text-align: left;
    /* line-height: 30px; */
  }

  .server_th td {
    margin-left: 4px;
    border-right: 0px;
    border-left: 0px;
  }

  .server_td {
    font-size: 18px;

  }

  .server_icon {
    font-size: 18px;
  }

  .server_text {
    font-size: 18px;
  }

  .table-bordered>thead>tr>th {
    border-bottom-width: 0px !important;
  }

  .table>tbody>tr>td {
    vertical-align: middle !important;
  }

  .row-bg {
    margin-bottom: 20px;
  }

  .threa_item {
    background: #272727;
    box-shadow: 0px 6px 10px 4px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    padding: 15px 20px 40px 20px;
    margin-bottom: 15px;
  }

  .threa_item_one {
    display: flex;
    margin-top: 15px;
  }

  .wenhao {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #fff;
    color: #000;
    text-align: center;
    line-height: 20px;
  }

  .threa_item_image {
    width: 20px;
    height: 20px;
  }

  .threa_item_title_one {
    margin-left: 10px;
    font-weight: bold;
    font-size: 16px;
    color: #fff;
  }

  .threa_item_title_two {
    margin-left: 10px;
    color: #c9692a;
    font-size: 16px;
    padding-right: 30px;
  }

  td>>>.el-icon-success {
    color: #5eadff;
    font-size: 34px;
  }

  td>>>.el-icon-error {
    color: #ff7f3a;
    font-size: 34px;
  }

  td>>>.el-icon-star-on:nth-child(1),
  td>>>.el-icon-star-on:nth-child(2),
  td>>>.el-icon-star-on:nth-child(3) {
    color: #ff8900;
  }

  td>>>.el-icon-star-on:nth-child(4),
  td>>>.el-icon-star-on:nth-child(5) {
    color: #d8d8d8;
  }

  /* 常见问题 */
  /* .four_item {
  box-shadow: 0px 6px 10px 4px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  padding: 15px 20px 40px 20px;
  margin-bottom: 15px;
}
.four_item_one {
  display: flex;
  margin-top: 15px;
}
.fouritem_image {
  width: 60px;
  height: 60px;
}
.four_item_title_one {
  margin-left: 10px;
  font-weight: bold;
  font-size: 18px;
}
.four_item_title_two {
  margin-left: 10px;
  color: #818181;
}
.four0 {
  background-color: #5190ff;
  color: #ffffff;
}
.four1 {
  background-color: #ff7226;
  color: #ffffff;
} */


  @media (max-width: 1199px) {
    .table_img {
      position: absolute;
      left: 0px;
    }
  }

  /* 移动端 */
  @media (max-width: 441px) {
    .table_content {
      font-size: 14px;
      margin: 20px;
    }

    table tr th {
      font-size: 14px;
    }
  }

  @media (max-width: 375px) {
    .table_content {
      font-size: 13px;
      margin: 20px;
    }

    table tr th {
      font-size: 13px;
    }

    td>>>.el-icon-success {
      color: #5eadff;
      font-size: 25px;
    }

    td>>>.el-icon-error {
      color: #ff3f3f;
      font-size: 25px;
    }

    td>>>.el-icon-star-on:nth-child(1),
    td>>>.el-icon-star-on:nth-child(2),
    td>>>.el-icon-star-on:nth-child(3) {
      color: yellow;
      font-size: 12px;
    }

    td>>>.el-icon-star-on:nth-child(4),
    td>>>.el-icon-star-on:nth-child(5) {
      color: #d8d8d8;
      font-size: 10px;
    }
  }

  @media (max-width: 320px) {
    .table_content {
      font-size: 12px;
      margin: 20px;
    }

    table tr th {
      font-size: 12px;
    }

    td>>>.el-icon-success {
      color: #5eadff;
      font-size: 25px;
    }

    td>>>.el-icon-error {
      color: #ff3f3f;
      font-size: 25px;
    }

    td>>>.el-icon-star-on:nth-child(1),
    td>>>.el-icon-star-on:nth-child(2),
    td>>>.el-icon-star-on:nth-child(3) {
      color: yellow;
      font-size: 10px;
    }

    td>>>.el-icon-star-on:nth-child(4),
    td>>>.el-icon-star-on:nth-child(5) {
      color: #d8d8d8;
      font-size: 10px;
    }
  }

</style>
